<template>
  <div v-loading="loading" class="app-main-content-box">
    <el-form v-if="detail" label-suffix="：" label-width="160px" size="small">
      <!-- 基础信息 -->
      <el-form-item v-if="detail.wxPayMchid" label="归属商户号">{{ detail.wxPayMchid }}</el-form-item>
      <el-form-item label="归属商户名">{{ detail.belongMerchantName }}</el-form-item>
      <!--      <el-form-item v-if="['cash_wx_pay','cash_wx_busi','discount_wx_busi'].includes(detail.couponType)" label="归属商户号">-->
      <!--        {{-->
      <!--          detail.wxPayMchid-->
      <!--        }}-->
      <!--      </el-form-item>-->
      <el-form-item v-if="['cash_wx_pay'].includes(detail.couponType)" label="微信批次号">{{ detail.thirdStockId || '无' }}</el-form-item>
      <el-form-item label="券类型">{{ couponTypeOptions[detail.couponType] }}</el-form-item>
      <el-form-item label="券名称">{{ detail.couponName }}</el-form-item>
      <div v-if="couponTypeGroup.cash.includes(detail.couponType)">
        <el-form-item label="券面额">{{ detail.denomination / 100 }}</el-form-item>
        <el-form-item label="门槛">满 {{ detail.transactionMinimum / 100 }} 元可使用{{ detail.maxUseNum ? '，最多可叠加 ' + detail.maxUseNum + ' 张' : '' }}</el-form-item>
      </div>
      <div v-if="couponTypeGroup.discount.includes(detail.couponType)">
        <el-form-item label="折扣">{{ detail.discountPercent / 10 }} 折</el-form-item>
        <el-form-item label="门槛">{{ detail.transactionMinimum ? detail.transactionMinimum / 100 + ' 元' : '无' }}</el-form-item>
        <el-form-item label="优惠上限">{{ detail.discountMaximum ? detail.discountMaximum / 100 + ' 元' : '无' }}</el-form-item>
      </div>
      <div v-if="couponTypeGroup.exchange.includes(detail.couponType)">
        <el-form-item label="兑换内容">{{ detail.exchangeThings }}</el-form-item>
        <el-form-item label="价值">{{ detail.denomination ? detail.denomination / 100 + ' 元' : '无' }}</el-form-item>
      </div>
      <el-form-item label="可用时间">
        <!-- 总时间 -->
        <div>{{ detail.startTime + ' ~ ' + detail.endTime }}</div>
        <!-- 时间类型一 -->
        <div v-if="detail.availableTime.timeType === 5">有效期内，任意时段可用</div>
        <div v-if="detail.availableTime.timeType === 1">生效后 {{ detail.availableTime.days }} 天可用</div>
        <div v-if="detail.availableTime.timeType === 2">每周指定星期：{{ detail.availableTime.availablePeriod | weekNum2WeekStr }}</div>
        <!-- <div v-if="detail.availableTime.timeType === 3">每月指定日期：{{ detail.availableTime.availablePeriod | dayNum2DayStr }}</div> -->
        <div v-if="detail.availableTime.timeType === 3">每月指定日期：{{ detail.availableTime.availablePeriod }}</div>
        <div v-if="detail.availableTime.timeType === 4">
          范围内指定日期：
          {{
            detail.availableTime.dateList
              .split(',')
              .map(function fun(v) {
                return v.replace(':', ' ~ ');
              })
              .join('、')
          }}
        </div>
        <div v-if="detail.availableTime.timeType === 2 || detail.availableTime.timeType === 3 || detail.availableTime.timeType === 4">
          <div v-if="detail.availableTime.startMinute1 || detail.availableTime.endMinute1">
            {{ detail.availableTime.startMinute1 | mm2HHmm }} ~ {{ detail.availableTime.endMinute1 | mm2HHmm }}
          </div>
          <div v-if="detail.availableTime.startMinute2 || detail.availableTime.endMinute2">
            {{ detail.availableTime.startMinute2 | mm2HHmm }} ~ {{ detail.availableTime.endMinute2 | mm2HHmm }}
          </div>
          <div v-if="detail.availableTime.startMinute3 || detail.availableTime.endMinute3">
            {{ detail.availableTime.startMinute3 | mm2HHmm }} ~ {{ detail.availableTime.endMinute3 | mm2HHmm }}
          </div>
        </div>
      </el-form-item>
      <!--v-if="detail.availableTime.timeType===1&&['cash','discount','exchange','cash_wx_busi','discount_wx_busi'].includes(detail.couponType)"-->
      <el-form-item label="生效时间">
        <div v-if="detail.secondDayAvailable">领取后第二天生效</div>
        <div v-else>领取后立即生效</div>
      </el-form-item>

      <!-- <el-form-item v-if="detail.couponTag == 1" label="报名时间">
				<div>{{ detail.signUpStartTime + ' ~ ' + detail.signUpEndTime }}</div>
			</el-form-item> -->
      <el-form-item label="使用说明">
        <ul v-if="detail.description">
          <li v-for="(v, i) in detail.description.split(/[(\r\n)]+/)" :key="i">{{ v }}</li>
        </ul>
        <div v-else>无</div>
      </el-form-item>

      <!-- 投放规则 -->
      <div v-if="['cash', 'discount', 'exchange'].includes(detail.couponType)">
        <el-form-item label="发放预算">
          <div v-if="detail.maxCoupons">
            有效期内可发放总上限为：{{ detail.maxCoupons }} 次
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCoupons')"
            >
              修改
            </el-button>
          </div>
          <div v-else>
            有效期内可发放总上限：无限制
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCoupons')"
            >
              修改
            </el-button>
          </div>
          <div v-if="detail.maxCouponsByDay">
            一个自然日可发放上限为：{{ detail.maxCouponsByDay }} 次
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCouponsByDay')"
            >
              修改
            </el-button>
          </div>
          <div v-else>
            一个自然日可发放上限为：无限制
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCouponsByDay')"
            >
              修改
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="用户类型">
          <div v-if="detail.userGroup === 1">所有人</div>
          <div v-else-if="detail.userGroup === 2">仅会员</div>
          <div v-else-if="detail.userGroup === 3">
            <template v-for="v in categoryList">
              <span v-if="detail.category.split(',').includes(String(v.id))" :key="v.id" class="last-dot">
                <span>{{ v.categoryName }}</span>
                <span class="dot">、</span>
              </span>
            </template>
          </div>
        </el-form-item>
        <el-form-item label="用户限制">
          <div v-if="detail.maxUserDay">一个自然日单用户可领取：{{ detail.maxUserDay }} 次</div>
          <div v-else>一个自然日单用户可领取：无限制</div>
          <div v-if="detail.maxUserWeek">一个自然周单用户可领取：{{ detail.maxUserWeek }} 次</div>
          <div v-else>一个自然周单用户可领取：无限制</div>
          <div v-if="detail.maxUserMonth">一个自然月单用户可领取：{{ detail.maxUserMonth }} 次</div>
          <div v-else>一个自然月单用户可领取：无限制</div>
          <div v-if="detail.maxUserAll">有效期内单个用户可领取：{{ detail.maxUserAll }} 次</div>
          <div v-else>有效期内单个用户可领取：无限制</div>
        </el-form-item>
        <el-form-item label="发放商户">
          <div v-if="detail.sendMerchant === 1">本商户</div>
          <div v-else-if="detail.sendMerchant === 2">本商户和已合作的所有商户</div>
          <div v-else-if="detail.sendMerchant === 3">
            <template v-for="v in detail.sendMerchantList">
              <span :key="v.merchant" class="last-dot">
                <span>{{ v.merchantName }}</span>
                <span class="dot">、</span>
              </span>
            </template>
          </div>
          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('sendMerchant')"
          >
            修改
          </el-button>
        </el-form-item>
        <el-form-item label="核销商户">
          <div v-if="detail.verifyMerchant === 1">本商户所有门店</div>
          <div v-else-if="detail.verifyMerchant === 2">本商户与所有合作商户</div>
          <div v-else-if="detail.verifyMerchant === 3 || detail.verifyMerchant === 4">
            <!--            <template v-for="v in detail.verifyMerchantList">-->
            <!--              <span :key="v.merchant" class="last-dot">-->
            <!--                <span>{{ v.merchantName }}</span>-->
            <!--                <span class="dot">、</span>-->
            <!--              </span>-->
            <!--            </template>-->
            <template v-for="v in verifyMerchantList">
              <div :key="v.merchant" class="last-dot">
                <div>
                  <span>{{ v.name }}（{{ v.shops.length }}家门店）：</span>
                  <span v-for="(shopItem, shopIndex) in v.shops">
                    <span v-if="shopIndex !== 0">、</span>
                    {{ shopItem.name }}
                  </span>
                </div>
              </div>
            </template>
          </div>

          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('verifyMerchant')"
          >
            修改
          </el-button>
        </el-form-item>
        <el-form-item v-if="detail.couponTag == 1" label="出资方">
          <div v-if="detail.financingParty === 1">核心商户</div>
          <div v-else-if="detail.financingParty === 2">合作商户</div>
          <div v-else-if="detail.financingParty === 3">默认按合作商户类型</div>
          <!-- <el-button
						v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
						size="small"
						class="edit-btn"
						round
						type="text"
						@click="openDialogEditCoupon('verifyMerchant')"
					>
						修改
					</el-button> -->
        </el-form-item>
        <el-form-item label="核销业务">
          <div>
            <template v-if="detail.verifyBusiness">
              <template v-for="v in detail.verifyBusiness.split(',')">
                <span :key="v" class="last-dot">
                  <span>{{ bizCodeKeyOptions[v] }}</span>
                  <span class="dot">、</span>
                </span>
              </template>
            </template>
            <span v-else>所有业务</span>
          </div>
          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('verifyBizCode')"
          >
            修改
          </el-button>
        </el-form-item>
      </div>

      <div v-if="['cash_wx_busi', 'discount_wx_busi'].includes(detail.couponType)">
        <el-form-item label="发放预算">
          <div>
            批次总预算：{{ detail.maxCoupons }} 次
            <!--            {{ detail.maxAmount ? "，" + detail.maxAmount / 100 + ' 元' : "" }}-->
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCoupons')"
            >
              修改
            </el-button>
          </div>
          <div>
            单天发放上限：{{ detail.maxCouponsByDay }} 次
            <!--            {{ detail.maxAmountByDay ? "，" + detail.maxAmountByDay / 100 + ' 元' : "" }}-->
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCouponsByDay')"
            >
              修改
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="用户限制">
          <div v-if="detail.maxUserAll">用户最大领取次数：{{ detail.maxUserAll }} 次</div>
          <div v-else>用户最大领取次数：无限制</div>
        </el-form-item>
        <el-form-item label="发放商户">
          <div v-if="detail.sendMerchant === 1">本商户</div>
          <div v-else-if="detail.sendMerchant === 2">本商户和已合作的所有商户</div>
          <div v-else-if="detail.sendMerchant === 3">
            <template v-for="v in detail.sendMerchantList">
              <span :key="v.merchant" class="last-dot">
                <span>{{ v.merchantName }}</span>
                <span class="dot">、</span>
              </span>
            </template>
          </div>
          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('sendMerchant')"
          >
            修改
          </el-button>
        </el-form-item>
        <!-- KD 商家 -->

        <el-form-item label="核销商户">
          <div v-if="detail.verifyMerchant === 1">本商户所有门店</div>
          <div v-else-if="detail.verifyMerchant === 2">本商户与所有合作商户</div>
          <div v-else-if="detail.verifyMerchant === 3 || detail.verifyMerchant === 4">
            <!--            <template v-for="v in detail.verifyMerchantList">-->
            <!--              <span :key="v.merchant" class="last-dot">-->
            <!--                <span>{{ v.merchantName }}</span>-->
            <!--                <span class="dot">、</span>-->
            <!--              </span>-->
            <!--            </template>    -->
            <template v-for="v in verifyMerchantList">
              <div :key="v.merchant" class="last-dot">
                <div>
                  <span>{{ v.name }}（{{ v.shops.length }}家门店）：</span>
                  <span v-for="(shopItem, shopIndex) in v.shops">
                    <span v-if="shopIndex !== 0">、</span>
                    {{ shopItem.name }}
                  </span>
                </div>
              </div>
            </template>
          </div>
          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('verifyMerchant')"
          >
            修改
          </el-button>
        </el-form-item>
        <el-form-item label="核销业务">
          <div>
            <template v-if="detail.verifyBusiness">
              <template v-for="v in detail.verifyBusiness.split(',')">
                <span :key="v" class="last-dot">
                  <span>{{ bizCodeKeyOptions[v] }}</span>
                  <span class="dot">、</span>
                </span>
              </template>
            </template>
            <span v-else>所有业务</span>
          </div>
          <el-button
            v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
            size="small"
            class="edit-btn"
            round
            type="text"
            @click="openDialogEditCoupon('verifyBizCode')"
          >
            修改
          </el-button>
        </el-form-item>
        <el-form-item label="微信卡包按钮">
          <div>{{ verifyMethodOptions[detail.verifyMethod] }}</div>
          <div v-if="detail.verifyMethod === 'MINI_PROGRAMS'">
            <div>appid：{{ JSON.parse(detail.verifyMiniprogramConfig).appId }}</div>
            <div>路径：{{ JSON.parse(detail.verifyMiniprogramConfig).page }}</div>
          </div>
        </el-form-item>
      </div>

      <!-- 代金券 -->
      <div v-if="['cash_wx_pay'].includes(detail.couponType)">
        <el-form-item label="发放预算">
          <div>
            批次总预算：{{ detail.maxCoupons }} 次
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCoupons')"
            >
              修改
            </el-button>
          </div>
          <div>
            单天发放上限：{{ detail.maxCouponsByDay }} 次
            <el-button
              v-if="detail.status === 2 && !$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')"
              size="small"
              round
              type="text"
              @click="openDialogEditCoupon('maxCouponsByDay')"
            >
              修改
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="用户限制">
          <div v-if="detail.maxUserAll">用户最大领取次数：{{ detail.maxUserAll }} 次</div>
          <div v-else>用户最大领取次数：无限制</div>
        </el-form-item>
        <el-form-item label="自然人限制">{{ detail.naturalPersonLimit ? '限制' : '不限' }}</el-form-item>
        <!--        <el-form-item label="发放商户">-->
        <!--          <div v-if="detail.sendMerchant===1">本商户</div>-->
        <!--          <div v-else-if="detail.sendMerchant===2">本商户和已合作的所有商户</div>-->
        <!--          <div v-else-if="detail.sendMerchant===3">-->
        <!--            <template v-for="v in detail.sendMerchantList">-->
        <!--              <span :key="v.merchant" class="last-dot">-->
        <!--                <span>{{ v.merchantName }}</span>-->
        <!--                <span class="dot">、</span>-->
        <!--              </span>-->
        <!--            </template>-->
        <!--          </div>-->
        <!--          <el-button-->
        <!--            v-if="detail.status===2"-->
        <!--            size="small"-->
        <!--            class="edit-btn"-->
        <!--            round-->
        <!--            type="text"-->
        <!--            @click="openDialogEditCoupon('sendMerchant')">修改-->
        <!--          </el-button>-->
        <!--        </el-form-item>-->
        <el-form-item label="核销商户">
          <span>{{ detail.verifyMerchants ? detail.verifyMerchants.replace(/,/g, '、') : '无' }}</span>
          <!--          <el-button-->
          <!--            v-if="detail.status===2"-->
          <!--            size="small"-->
          <!--            class="edit-btn"-->
          <!--            round-->
          <!--            type="text"-->
          <!--            @click="openDialogEditCoupon('verifyMerchant')">修改-->
          <!--          </el-button>-->
        </el-form-item>
        <el-form-item label="核销商品">
          <div v-if="detail.availableItems">
            <div v-for="(v, k) in JSON.parse(detail.availableItems)" :key="k">编码：{{ k }}&nbsp;&nbsp;&nbsp;名称：{{ v }}</div>
          </div>
          <div v-else>不限</div>
        </el-form-item>
        <el-form-item label="支付类型">
          <template v-if="detail.wxPayType">
            <template v-for="v in detail.wxPayType.split(',')">
              <span :key="v" class="last-dot">
                <span>{{ wxPayTypeOptions[v] }}</span>
                <span class="dot">、</span>
              </span>
            </template>
          </template>
          <span v-else>所有类型</span>
        </el-form-item>
        <el-form-item label="支付方式">
          <div v-if="!detail.limitPay">所有银行卡和微信零钱都可使用</div>
          <div v-else-if="detail.limitPay && detail.limitPay === 'CFT'">微信零钱</div>
          <div v-else-if="detail.limitPay">
            <div>
              {{ wxPayBankNameOptions[detail.limitPay.split('_')[0]] }}
              <span v-if="detail.limitCard">{{ JSON.parse(detail.limitCard).name }}</span>
              {{ wxPayBankCardTypeOptions[detail.limitPay.split('_')[1]] }}
            </div>
            <div v-if="detail.limitCard">卡bin：{{ JSON.parse(detail.limitCard).bin.join('、') }}</div>
          </div>
        </el-form-item>
        <el-form-item label="优惠叠加">
          <span v-if="detail.combineUse">支持叠加其他优惠使用</span>
          <span v-else>不可叠加其他优惠使用</span>
        </el-form-item>
        <el-form-item label="预充值">
          <span v-if="detail.noCash">免充值优惠券</span>
          <span v-else>预充值优惠券</span>
        </el-form-item>
      </div>

      <el-form-item label="订单优惠标记">{{ detail.discountTag ? detail.discountTag.replace(/,/g, '、') : '无' }}</el-form-item>

      <!-- 样式主题 -->
      <el-form-item label="背景主题">
        <div class="flexRSC">
          <span :style="{ backgroundColor: detail.theme, height: '22px', width: '22px' }" />
					&nbsp;
          <span>{{ detail.theme }}</span>
        </div>
      </el-form-item>
      <el-form-item label="品牌名称">{{ detail.brandName }}</el-form-item>
      <div v-if="['cash', 'discount', 'exchange'].includes(detail.couponType)">
        <el-form-item label="LOGO">
          <el-image v-if="detail.logo" :src="fileBaseUrl + detail.logo" style="width:120px;height:120px" fit="fill" />
          <el-image v-else :src="'static/icon/coupon/i-coupon-' + detail.couponType + '.png'" style="width:120px;height:120px" fit="fill" />
        </el-form-item>
        <el-form-item label="详情封面">
          <el-image v-if="detail.detailPage" :src="fileBaseUrl + detail.detailPage" style="width:320px;height:200px" fit="fill" />
          <span v-else>无</span>
        </el-form-item>
      </div>
      <div v-if="['cash_wx_busi', 'discount_wx_busi', 'cash_wx_pay'].includes(detail.couponType)">
        <el-form-item label="LOGO">
          <el-image v-if="detail.logo" :src="detail.logo" style="width:120px;height:120px" fit="fill" />
          <el-image v-else :src="'static/icon/coupon/i-coupon-' + detail.couponType + '.png'" style="width:120px;height:120px" fit="fill" />
        </el-form-item>
        <el-form-item label="详情封面">
          <el-image v-if="detail.detailPage" :src="detail.detailPage" style="width:320px;height:200px" fit="fill" />
          <span v-else>无</span>
        </el-form-item>
      </div>
      <el-form-item label="条码显示">
        <div v-if="detail.scanCode === 1 || detail.scanCode === 3">显示条形码</div>
        <div v-if="detail.scanCode === 2 || detail.scanCode === 3">显示二维码</div>
        <div />
      </el-form-item>
      <el-form-item v-if="['cash', 'discount', 'exchange', 'cash_wx_busi', 'discount_wx_busi'].includes(detail.couponType)" label="功能按钮">
        <div v-if="!detail.functionButton">不显示功能按钮</div>
        <div v-else>
          <div>文案：{{ JSON.parse(detail.functionButtonConfig).word || '无' }}</div>
          <div>appid：{{ JSON.parse(detail.functionButtonConfig).appId || '无' }}</div>
          <div>路径：{{ JSON.parse(detail.functionButtonConfig).page || '无' }}</div>
        </div>
      </el-form-item>
      <div v-if="['cash_wx_busi', 'discount_wx_busi'].includes(detail.couponType)">
        <el-form-item label="微信卡包公众号入口">
          <div v-if="detail.customEntrance.appidType === 1">无</div>
          <div v-else-if="detail.customEntrance.appidType === 2">启用并跳转到本商户已授权的公众号</div>
          <div v-else-if="detail.customEntrance.appidType === 3">启用并跳转到指定的公众号(appid：{{ detail.customEntrance.appid }})</div>
        </el-form-item>
        <el-form-item label="微信卡包小程序入口">
          <div v-if="detail.customEntrance.miniProgramsInfo">
            <div>APPID：{{ detail.customEntrance.miniProgramsAppid || '无' }}</div>
            <div>路径：{{ detail.customEntrance.miniProgramsPath || '无' }}</div>
            <div>入口文案：{{ detail.customEntrance.entranceWords || '无' }}</div>
            <div>引导文案：{{ detail.customEntrance.guidingWords || '无' }}</div>
          </div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item label="微信卡包营销馆入口">
          <div v-if="detail.customEntrance.hallId">微信支付营销馆的馆id：{{ detail.customEntrance.hallId }}</div>
          <div v-else>无</div>
        </el-form-item>
      </div>
    </el-form>

    <DialogEditCoupon ref="dialogEditCoupon" />
  </div>
</template>

<script>
import DialogEditCoupon from './DialogEditCoupon'
import { wxPayBankNameOptions, wxPayBankCardTypeOptions } from '@/assets/json/wxpay-bank'
import { mapGetters } from 'vuex'
import { couponDetail, couponVerifyShops } from '../../api/coupon'
import { getAllVipCardList } from '@/api/vip'

export default {
  components: {
    DialogEditCoupon
  },
  props: {
    couponBase: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      // 配置
      couponTypeOptions: {
        cash: '代金券',
        cash_wx_pay: '微信支付代金券',
        cash_wx_busi: '微信商家代金券',
        discount: '折扣券',
        discount_wx_busi: '微信商家折扣券',
        exchange: '兑换券'
      },
      couponTypeGroup: {
        cash: ['cash', 'cash_wx_pay', 'cash_wx_busi'],
        discount: ['discount', 'discount_wx_busi'],
        exchange: ['exchange']
      },
      verifyMethodOptions: {
        OFF_LINE: '跳转到小程序的券详情页面',
        MINI_PROGRAMS: '跳转到其它小程序',
        PAYMENT_CODE: '跳转到微信付款码'
      },
      wxPayTypeOptions: {
        MICROAPP: '小程序支付',
        APPPAY: 'APP支付',
        PPAY: '免密支付',
        CARD: '刷卡支付',
        FACE: '人脸支付',
        OTHER: '其他支付'
      },
      wxPayBankNameOptions: wxPayBankNameOptions,
      wxPayBankCardTypeOptions: wxPayBankCardTypeOptions,
      predefineColors: ['#63B359', '#2C9F67', '#509FC9', '#5885CF', '#9062C0', '#D09A45', '#E4B138', '#EE903C', '#DD6549', '#CC463D'],
      // 状态
      loading: false,
      // 数据
      categoryList: [],
      detail: null,
      verifyMerchantList: []
    }
  },
  computed: {
    ...mapGetters(['bizCodeKeyOptions', 'fileBaseUrl'])
  },
  // watch: {
  //   couponBase: {
  //     handler: function(val) {
  //       this.fetchData()
  //     },
  //     deep: true
  //   }
  // },
  created() {
    const referrer = document.getElementById('referrer')
    referrer.setAttribute('content', 'never')
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    const referrer = document.getElementById('referrer')
    referrer.setAttribute('content', 'always')
  },
  methods: {
    /**
		 * 数据组
		 */
    // 初始化
    fetchData() {
      this.loading = true
      Promise.all([this.getDetail(), this.getCategoryList()]).finally(() => {
        this.loading = false
      })
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        couponDetail({ couponId: this.couponBase.id })
          .then(res => {
            console.log('获取详情', res)
            const detail = res.data.prototype
            this.$emit('detail', detail)
            this.couponBase.receiveCode = detail.receiveCode
            detail.availableTime = res.data.availableTime || {
              timeType: 5
            }
            detail.sendMerchantList = res.data.sendMerchantList
            detail.verifyMerchantList = res.data.verifyMerchantList
            if (res.data.wxCustomEntrance) {
              detail.customEntrance = res.data.wxCustomEntrance
            } else {
              detail.customEntrance = {
                appid: null,
                entranceWords: null,
                guidingWords: null,
                hallId: null,
                miniProgramsAppid: null,
                miniProgramsInfo: false,
                miniProgramsPath: null
              }
            }
            // 核销商户查询类型 queryType:0查询所有 1查询本商户 2查询合作商户
            detail.queryType = detail.verifyMerchant === 1 || detail.verifyMerchant === 4 ? 1 : detail.verifyMerchant === 2 ? 2 : 0
            this.detail = detail
            if (this.detail.verifyMerchant === 3 || this.detail.verifyMerchant === 4) {
              this.getCouponVerifyShops(this.detail.id)
            }
            resolve()
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取核销门店
    getCouponVerifyShops(couponId) {
      return new Promise((resolve, reject) => {
        this.loading = true
        couponVerifyShops({ couponId })
          .then(res => {
            this.verifyMerchantList = res.data
          })
          .finally(() => {
            this.loading = false
            resolve()
          })
      })
    },

    // 获取会员卡
    getCategoryList() {
      return new Promise((resolve, reject) => {
        getAllVipCardList()
          .then(res => {
            this.categoryList = res.data
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 打开编辑
    openDialogEditCoupon(editType) {
      this.$refs.dialogEditCoupon.open({ editType, form: this.detail }).then(res => {
        this.getDetail()
      })
    }
    /**
		 * 按钮组
		 */

    /**
		 * 状态组
		 */
    /**
		 * 方法组
		 */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.last-dot:last-child .dot {
	display: none;
}

.edit-btn {
	padding: 9px 0 !important;
}
</style>
